<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
    String path = request.getContextPath();
			String basePath = request.getScheme() + "://"
					+ request.getServerName() + ":" + request.getServerPort()
					+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>易买网 - 首页</title>
<link type="text/css" rel="stylesheet"
	href="<%=path%>/resources/css/style.css" />
<script type="text/javascript"
	src="<%=path%>/resources/scripts/function.js"></script>
<script type="application/javascript"
	src="<%=path%>/resources/js/jquery-2.0.3.js"></script>
<script type="application/javascript">
	
	
	
	
	
	
	
	  
  
$.fn.serializeObject = function()    
{    
   var jsonData1 = {};    
   var a = this.serializeArray();    
   $.each(a, function() {    
       if (jsonData1[this.name]) {    
           if (!jsonData1[this.name].push) {    
               jsonData1[this.name] = [jsonData1[this.name]];    
           }    
           jsonData1[this.name].push(this.value || '');    
       } else {    
           jsonData1[this.name] = this.value || '';    
       }    
   }); 
                   // 再转成[{"id": "12", "name": "aaa", "pwd":"pwd1"},{"id": "14", "name": "bb", "pwd":"pwd2"}]的形式
                var vCount = 0;
                // 计算json内部的数组最大长度
                for(var item in jsonData1){
                    var tmp = $.isArray(jsonData1[item]) ? jsonData1[item].length : 1;
                    vCount = (tmp > vCount) ? tmp : vCount;
                }

                if(vCount > 1) {
                    var jsonData2 = new Array();
                    for(var i = 0; i < vCount; i++){
                        var jsonObj = {};
                        for(var item in jsonData1) {
                            jsonObj[item] = jsonData1[item][i];
                        }
                        jsonData2.push(jsonObj);
                    }
                    return JSON.stringify(jsonData2);
                }else{
                    return "[" + JSON.stringify(jsonData1) + "]";
                }    
};  
  
function onClik(){  
        //alert(577);
        var jsonuserinfo = $('#form1').serializeObject();
        //alert(jsonuserinfo);
        $.Ajax({
        type : "POST",
        url:"${basePath}/main/order",
        contentType :"application/json;charset=utf-8",
        dataType:"json",
        data: JSON.stringify(jsonuserinfo),
        success: function(data){
              alert(data);
        },
        error: function(res){
              alert(res.responseText);
        }
        
        
        });
}  








</script>
</head>
<body>
	<div id="header" class="wrap">
		<div id="logo">
			<img src="<%=path%>/resources/images/logo.gif" />
		</div>
	<div class="help"><a href="<%=path%>/main/shop" class="shopping">购物车</a><a href="<%=path%>/login">登录</a><a href="<%=path%>/main/register">注册</a><a href="<%=path%>/main/cancel">注销</a></div>
		<div class="navbar">
			<ul class="clearfix">
				<li class="current"><a href="<%=path%>/main/index">首页</a></li>
				<c:forEach var="indexCat" items="${categoriesIndex }">
					<li><a href="<%=path%>/main/${indexCat.id }/product">${indexCat.name }</a></li>
				</c:forEach>
			</ul>
		</div>
	</div>
	<div id="childNav">
		<div class="wrap">
		<ul class="clearfix">
		   <c:forEach var="seCat" items="${categoriesSeconde }">
		   <li><a href="<%=path%>/main/${seCat.id }/product">${seCat.name }</a></li>
		   </c:forEach>
		</ul>
		</div>
	</div>
	<div id="position" class="wrap">
		您现在的位置：<a href="<%=path%>/main/index">易买网</a> &gt; 购物车
	</div>
	<div class="wrap">
		<div id="shopping">
			<form id="form1" name="form1" action="<%=path%>/main/shop"
				method="POST">
				<table>
					<tr>
						<th>商品名称</th>
						<th>商品价格</th>
						<th>购买数量</th>
						<th>操作</th>
					</tr>
					<c:forEach var="shop" items="${shops }">
						<tr id="product_id_${shop.id }">
							<td class="thumb"><img
								src="<%=path%>/resources/images/product/${shop.epFileName }" /><a
								href="product-view.html">${shop.epName }</a></td>
							<td class="price" id="price_id_1"><span>￥${shop.epPrice }</span>
								<input type="hidden" name="id" value="${shop.id }" />
							<td class="number">
								<dl>
									<dt>
										<input id="eodQuantity" type="text"
											value="${shop.eodQuantity }" />
									</dt>
								</dl>
							</td>
							<td class="delete"><a
								href="javascript:delShopping(${shop.id });">删除</a></td>
						</tr>
					</c:forEach>
				</table>
				<div class="button">
					<input type="submit" value="" onclick="javascript:onClik();" />
				</div>
			</form>
		</div>
		<script type="text/javascript">
			document.write("Cookie中记录的购物车商品ID：" + getCookie("product")
					+ "，可以在动态页面中进行读取");
		</script>
	</div>
	<div id="footer">Copyright &copy; 2017 爱苗科技 All Rights Reserved.
		皖ICP证000001号</div>
</body>
</html>